<template>
    <h1>员工列表练习</h1>
    <input type="text" placeholder="请输入员工姓名" v-model="emp.name"><br>
    <input type="text" placeholder="请输入员工工资" v-model="emp.salary"><br>
    <input type="text" placeholder="请输入员工岗位" v-model="emp.position"><br>
    <br>
    <button @click="add">添加员工</button>
    <table border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
        <tr v-for="(item, index) in arr">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.salary}}</td>
            <td>{{item.position}}</td>
        </tr>
    </table>
</template>

<script setup>
import { ref } from 'vue';
// 1.定义员工对象, 初始化,用来保存员工信息
const emp = ref({
    name: '',
    salary: '',
    position: ''
});
// 2.定义员工数组，初始化，用来保存多个员工对象
const arr = ref([]);
// 3.定义添加员工方法
const add = () => {
    // 6.判断是否为空, 为空则提示
    if (emp.value.name.trim()=='' || emp.value.salary.trim()=='' || emp.value.position.trim()==''){
        alert('请输入员工信息');
        return;
    }
    // 4.添加员工，获取员工信息，添加到数组中
    arr.value.push(emp.value);
    // 5.员工添加完毕，清空表单，重新获取焦点，否则会覆盖
    emp.value = {
        name: '',
        salary: '',
        position: ''
    };
    console.log(arr.value);
}
</script>

<style scoped>

</style>